import React, { useEffect, useState , Key} from "react";
import { Card, Row, Col, Tree, Tag, Pagination, Table, Button } from "antd";
import { useNavigate, useParams } from "react-router-dom";


import {
  getHospitalDepartmentRequest,     //请求科室数据Api
  getScheduleRuleRequest,           //某个科室排班规则请求
  findScheduleListRequest,          //请求科室时间详细信息
} from "@api/hospital/hospitalList"


import type {
  getHosDepartmentReqType,    //请求科室数据返回值类型
  bookingScheduleListType,    //某个科室排班规则请求返回值中数组的类型    
  findScheduleListReturn,     //科室时间详细信息返回值类型 
} from "@api/hospital/model/hospitalListTypes"


export default function HospitalSchedule() {
  //编程式路由导航
  const navigate = useNavigate()
  //拿到医院列表传过来的hoscode
  const { hoscode } = useParams()

  //分页器
  const [current, setCurrent] = useState(1)
  const [pageSize, setPagesize] = useState(10)
  const [total, setTotal] = useState(0)


  //保存科室数据渲染到树里面
  const [sectionData, setSectionData] = useState<getHosDepartmentReqType>([])
  //保存某个科室排班规则数据中数组的值 渲染到Tag里面
  const [schduleRule, setSchduleRule] = useState<bookingScheduleListType>([])
  //保存科室时间详细信息 渲染到表格
  const [schduleList , setSchduleList] = useState<findScheduleListReturn>([])

  //保存科室 点击树节点 改变科室重新发送请求渲染
  const [depCode, setDepCode] = useState("200040878")
  //保存排班日期 点击Tag 改变排班日期重新发送请求渲染
  const [workDate , setWorkDate] = useState("2022-04-28")



  //初始化请求科室数据
  useEffect(() => {
    (async () => {
      //请求数据
      const result = await getHospitalDepartmentRequest(hoscode as string)

      //保存在状态中
      setSectionData(result)

    })()
  }, [])


  //初始化获取某个科室的时排班规则  点击树节点(改变depCode)渲染不同的科室时间
  useEffect(() => {
    (async () => {
      //请求某个科室时间规则
      const result = await getScheduleRuleRequest({
        page: current,
        limit: pageSize,
        hoscode: hoscode as string,
        depcode: depCode,
      })

      //把请求回来的某个科室排班规则数据中地数组保存在状态
      setSchduleRule(result.bookingScheduleList)

      //改变总数
      setTotal(result.total)

      //保存科室的时间信息
      // setWorkDate(result.bookingScheduleList[0].workDate)

    })()
  }, [current, pageSize, depCode])


  //初始化获取排班日期详细列表   点击Tag(改变workData)渲染不同的表格数据
  useEffect(() => {
    ( async() => {
      const result = await findScheduleListRequest({
        hoscode: hoscode as string,
        depcode: depCode,
        workDate: workDate
      })

      //把结果保存在科室时间详细信息
      setSchduleList(result)

    })()
  }, [depCode , workDate])



  //树形样式
  const treeStyle = {
    height: "500px",   //固定高度
    overflow: "auto",  //内容超出生成滚动条
    border: "1px solid #000", //边框
  }
  // 表格列的描述
  const columns = [
    {
      title: "序号",
      render(_: any, __: any, index: number) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费用",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];



  //1.展示总数据的回调函数
  const showTotalHandle = (total: number) => {
    return <span>{`总数据有${total}条`}</span>
  }

  //2.改变页码的回调函数
  const changePageHandle = (current: number, pageSize: number) => {
    //切换页码改变状态重新渲染
    setCurrent(current)
    setPagesize(pageSize)
  }

  //3.点击树的回调函数
  const clickTreeHandle = (depcode:Key[]) => {
    //数组中第一项就是当前点击的数节点的depcode
    //点击树改变科室
    setDepCode(depcode[0] as string)
  }

  //4.点击Tag的回调函数
  const changeborderhandle = (workdate:string) => {
    return () => {
      //点击Tag改变workDate
      setWorkDate(workdate)
    }
  }


  return (
    <Card>
      <p>选择：北京协和医院 / 多发性硬化专科门诊 / 2022-04-28</p>

      {/* 一行两列 列与列的间距20  */}
      <Row gutter={20}>

        {/* 左 */}
        <Col span={5}>
          <div>
            <Tree
              style={treeStyle}
              treeData={sectionData as []}   //树的数据用请求回来的数据
              fieldNames={{ title: "depname", key: "depcode" }}   //数据的配置
              expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]} //默认展开专科
              //点击数节点函数 参数1: depcode组成的数组
              onSelect = {clickTreeHandle} 
            />
          </div>
        </Col>


        {/* 右 */}
        <Col span={19}>
          <div style={{ marginBottom: 20, cursor: "pointer" }}>
            {
              schduleRule.map((item) => {
                return (
                  <Tag 
                    key={item.workDate} 
                    //点击Tag把当前的workDate传递到函数 
                    onClick = {changeborderhandle(item.workDate)}
                  >
                    <p>{item.workDate}</p>
                    <p>
                      {item.availableNumber}/{item.reservedNumber}
                    </p>
                  </Tag>
                )
              })
            }
          </div>


          {/* 分页器 */}
          <Pagination
            pageSizeOptions={[1, 5, 10, 15, 20, 30, 40]}
            current={current}
            pageSize={pageSize}
            total={total}
            //展示切换页码
            showSizeChanger

            //展示数据总数
            showTotal={showTotalHandle}

            //改变页码的回调
            onChange={changePageHandle}

          />

          {/* 表格 */}
          <Table
            style={{ marginTop: 20 }}
            columns={columns}
            dataSource={schduleList}
            bordered
            rowKey="id"
            pagination={false}
          />

          <Button style={{ marginTop: 20 }} onClick={()=> navigate(-1)}>返回</Button>
        </Col>

      </Row>
    </Card>
  );
}
